<template>
	<div>
		<topBar></topBar>
		<sideBar></sideBar>
		<div v-bind:class="{ 'margin':hiede , 'margin1':  isshow}">
			<div  class="conte-view">
				<router-view></router-view>
			</div>
			<footerDiv></footerDiv>
		</div>
		
	</div>
</template>

<script>
	import emitt from './emit'
	import topBar from './topBar'
	import sideBar from './sideBar'
	import footerDiv from './footer'
	export default{
		name:"home",
		components: {
			topBar,
			sideBar,
			footerDiv,
		},
		data(){
			return{
				isshow:true,
				hiede:false
			}
		},
		mounted:function(){
			var me =this
			emitt.$on("toggle", function (isshow) {
           		me.hiede = isshow
           		me.isshow =! isshow;
    		})	
		},
	}
</script>

<style>
.conte-view{
	margin-left: 20px;
	height: calc(100% - 240px);
	margin-bottom: 40px;
	overflow: auto;
	padding-right: 20px;
}
.margin{
	padding-left: 70px;	
	margin-top: 20px;
	position: fixed;
	top: 60px;
	left: 0;
	height: 100%;
	transition: all 0.3s;
	width: 100%;
	box-sizing: border-box;
}
.margin1{
	padding-left: 200px;	
	margin-top: 20px;
	position: fixed;
	top: 60px;
	left: 0;
	height: 100%;
	transition: all 0.2s;
	width: 100%;
	box-sizing: border-box;
}
</style>